import React, { Component } from 'react'
import { withStyles } from 'material-ui/styles'
import AppBar from 'material-ui/AppBar'
import Toolbar from 'material-ui/Toolbar'
import withWidth from 'material-ui/utils/withWidth'
import Hidden from 'material-ui/Hidden'
import Button from 'material-ui/Button'

import Logged from '../header/Logged'
import NoLogged from '../header/NoLogged'
import Logo from '../logo'
import SearchBar from '../search/SearchBar'
import Feedback from '../tools/Feedback'

const styles = theme => ({
	appBar: {
		boxShadow:'0px 5px 50px 0px rgba(0, 0, 0, 0)',
  },
  toolBar: {
  	paddingLeft: '5%',
  	paddingRight: '5%',
  },
  '@media (max-width: 600px)': {
  	toolBar: {
  		paddingLeft: 8,
  		paddingRight: 0,
  		minHeight: 45,
  	}
  }
})

@withWidth()
@withStyles(styles)
class Header extends Component {
	constructor(props) {
	  super(props)
	}

	static defaultProps = { showSearch: false, showSubTitle: false, showLogoTitle: false, showLogo: false, showOperations: false, position: 'fixed'}

  toggle() {
    this.props.setShowFeedback(!this.props.showFeedback);
  }

	render() {
	  	const {classes, isAuthed, showSearch, showSubTitle, showLogoTitle, showLogo, showFeedback, showOperations, position} = this.props
			return (
	      <AppBar position={position} color="inherit" className={classes.appBar}>
	        <Toolbar className={classes.toolBar}>
	        	{
	        		showLogo?<Logo showSubTitle={showSubTitle} showLogoTitle={showLogoTitle}/>:
	        		<Hidden smDown>
	        			<Logo showSubTitle={showSubTitle} showLogoTitle={showLogoTitle}/>
	        		</Hidden>
	        	}
	        	{
	        		showSearch?<SearchBar {...this.props} disableUnderLine={false}/>: ''
	        	}
	        	{
	        		showOperations? (<Button color="inherit" onClick={this.toggle.bind(this)} >问题反馈</Button>): ''
	        	}
        		<Feedback
              classes={{
                paper: classes.dialog,
              }}
              open={showFeedback}
              onRequestClose={this.toggle.bind(this)}
              value={'this.state.value'}
              {...this.props}
            />
            <Hidden smDown>
							{
 								showOperations?isAuthed? <Logged {...this.props}/> : <NoLogged {...this.props}/>: ''
 							}
 						</Hidden>
	        </Toolbar>
	      </AppBar>
		 )
	}
}

export default Header

